<template>
	<view class="detail-container">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }"
			 @click="tabClick(index)">
				{{ item.text }}
			</view>
		</view>
		<view v-if="tabCurrentIndex == 0">
			<view class="status">
				<text>{{ticketType[ticketDetail['工单类型']]}}</text>
				<text style="color: #7D77EF;" v-if="ticketDetail['工单状态'] === 'unclaimed'">待派发</text>
				<text style="color: #FFB93F;" v-if="ticketDetail['工单状态'] === 'pending'">待处理</text>
				<text style="color: #1152FC;" v-else-if="ticketDetail['工单状态'] === 'handling'">处理中</text>
				<text style="color: red;" v-else-if="ticketDetail['工单状态'] === 'timeout'">已超时</text>
				<text style="color: #FFB93F;" v-if="ticketDetail['工单状态'] === 'completedwithtimeout'">超时完成</text>
				<text style="color: #43CC46;" v-else-if="ticketDetail['工单状态'] === 'completed'">正常完成</text>
				<text style="color: #FB5656;" v-else-if="ticketDetail['工单状态'] === 'abandoned'">已废弃</text>
			</view>
			<!-- <live-player id="livePusher" src="rtmp://139.196.48.3:8000/live?token=58cef65d08d24ec49dc98bad72b13f68&session=74cb3e2de10e404fb0bd947f62857c0a/Nlf5OHBACgc67i5OCQr5lft282vAPk6veMWdQpt0DLY_1"
			 autoplay @statechange="statechange" @error="error" style="width: 300px; height: 225px;" /> -->
			<view class="order-content">
				<view class="content-item">
					<text class="item-name">工单来源：</text>
					<view style="word-break:break-all;flex: 1;">{{originType[ticketDetail['来源']]}}</view>
				</view>
				<view class="content-item">
					<text class="item-name">记录编号：</text>
					<view style="word-break:break-all;flex: 1;">{{ticketDetail['工单编号']}}</view>
				</view>
				<view class="content-item">
					<text class="item-name">联系人姓名：</text>
					<view style="word-break:break-all;flex: 1;">{{ticketDetail['联系人姓名']}}</view>
					<!-- <text>{{ticketDetail['联系人姓名']}}</text> -->
				</view>
				<view class="content-item">
					<text class="item-name">联系电话：</text>
					<view style="word-break:break-all;flex: 1;">{{ticketDetail['联系人电话']}}</view>
					<!-- <text>{{ticketDetail['联系人电话']}}</text> -->
				</view>
				<view class="content-item">
					<text class="item-name">工单类型：</text>
					<text>{{ticketType[ticketDetail['工单类型']]}}</text>
				</view>
				<view class="content-item">
					<text class="item-name">报事位置：</text>
					<view style="word-break:break-all;flex: 1;">{{ticketDetail['报事位置']}}</view>
					<!-- <text>{{ticketDetail['报事位置']}}</text> -->
				</view>
				<view class="content-item" v-if="checkTicket['竣工时间']">
					<text class="item-name">竣工时间：</text>
					<text>{{checkTicket['竣工时间']}}</text>
				</view>
				<view class="content-item" v-if="renovationTicket['装修事项']">
					<text class="item-name">装修事项：</text>
					<view style="word-break:break-all;flex: 1;">{{renovationTicket['装修事项']}}</view>
					<!-- <text>{{renovationTicket['装修事项']}}</text> -->
				</view>
				<view class="content-item" v-if="renovationTicket">
					<text class="item-name">施工单位：</text>
					<view style="word-break:break-all;flex: 1;">{{renovationTicket['施工单位']}}</view>
					<!-- <text>{{renovationTicket['施工单位']}}</text> -->
				</view>
				<view class="content-item" v-if="renovationTicket">
					<text class="item-name">施工负责人：</text>
					<view style="word-break:break-all;flex: 1;">{{renovationTicket['施工负责人']}}</view>
					<!-- <text>{{renovationTicket['施工负责人']}}</text> -->
				</view>
				<view class="content-item" v-if="renovationTicket">
					<text class="item-name">负责人电话：</text>
					<view style="word-break:break-all;flex: 1;">{{renovationTicket['负责人电话']}}</view>
				</view>
				<view class="content-item" v-if="renovationTicket">
					<text class="item-name">装修期限：</text>
					<text>{{startTime + ' 至 ' + endTime}}</text>
				</view>
				<view v-if="ticketDetail['上门时间']" class="content-item">
					<text class="item-name">上门时间：</text>
					<text>{{ticketDetail['上门时间']}}</text>
				</view>
				<view class="content-item">
					<text class="item-name">创建时间：</text>
					<text>{{ticketDetail['创建时间'] | formatTime}}</text>
				</view>
				<view v-if="ticketDetail['接单时间']" class="content-item">
					<text class="item-name">接单时间：</text>
					<text>{{ticketDetail['接单时间'] | formatTime}}</text>
				</view>
				<view class="content-item">
					<text class="item-name">所属小区：</text>
					<view style="word-break:break-all;flex: 1;">{{ticketDetail['所属项目名称']}}</view>
					<!-- <text>{{ticketDetail['所属项目名称']}}</text> -->
				</view>
				<view v-if="ticketDetail['报事描述']" class="content-item">
					<text class="item-name">报事描述：</text>
					<view style="word-break:break-all;flex: 1;">{{ticketDetail['报事描述']}}</view>
				</view>
				<view class="content-item">
					<text class="item-name">工单附件：</text>
				</view>
				<view v-if="imgLength !== 0" class="content-img">
					<view class="img-item" v-if="ticketFile[0].fileData">
						<van-image @click="previewImage(0)" fit="cover" width="110" height="110" :src="ticketFile[0].fileData" />
					</view>
					<view class="img-item" v-if="ticketFile[1].fileData">
						<van-image @click="previewImage(1)" fit="cover" width="110" height="110" :src="ticketFile[1].fileData" />
					</view>
					<view class="img-item" v-if="ticketFile[2].fileData">
						<van-image @click="previewImage(2)" fit="cover" width="110" height="110" :src="ticketFile[2].fileData" />
					</view>
				</view>
				<van-empty description="暂无附件" v-else />
				<view v-if="ticketDetail['处理结果']" class="content-item auto">
					<text class="item-name">处理结果：</text>
					<view style="word-break:break-all;flex: 1;">{{ticketDetail['处理结果']}}</view>
				</view>
				<view v-if="ticketDetail['处理时间']" class="content-item">
					<text class="item-name">处理时间：</text>
					<text>{{ticketDetail['处理时间'] | formatTime}}</text>
				</view>
				<view v-if="ticketDetail['工单状态'] === 'completed'">
					<view class="content-item">
						<text class="item-name">处理结果附件：</text>
					</view>
					<view v-if="ticketDetail['处理结果附件']" class="content-img">
						<view class="img-item" v-if="resultFile[0].fileData">
							<van-image @click="previewResult(0)" fit="cover" width="110" height="110" :src="resultFile[0].fileData" />
						</view>
						<view class="img-item" v-if="resultFile[1].fileData">
							<van-image @click="previewResult(1)" fit="cover" width="110" height="110" :src="resultFile[1].fileData" />
						</view>
						<view class="img-item" v-if="resultFile[2].fileData">
							<van-image @click="previewResult(2)" fit="cover" width="110" height="110" :src="resultFile[2].fileData" />
						</view>
					</view>
					<van-empty description="暂无附件" v-else />
				</view>
				<view v-if="ticketDetail['完成时间']" class="content-item">
					<text class="item-name">完成时间：</text>
					<text>{{ticketDetail['完成时间'] | formatTime}}</text>
				</view>
				<view class="sign-img" v-if="signFile">
					<view class="left-text">业主签字:</view>
					<van-image fit="cover" width="110" height="110" :src="signFile" />
				</view>
			</view>
			<button v-if="personType == 1 && (ticketDetail['工单状态'] == 'unclaimed' || ticketDetail['工单状态'] == 'pending')" class="accept-ticket" @click="handleTap('picker1')">派发</button>
			<lb-picker ref="picker1" v-model="value1" mode="selector" :list="operatorList" :dataset="{ name: 'label1' }" @change="handleChange"
			 @confirm="handleConfirm" @cancel="handleCancel">
			</lb-picker>
			<!-- <view class="order-btn" v-if="ticketDetail['工单状态'] !== 'completed' && !isUnitTicket && ticketDetail['工单状态'] !== 'abandoned' && ticketDetail['工单状态'] !== 'unclaimed'">
				<button @click="handleTap('picker1')">转派单</button>
				<button class="sign-btn" @click="goCompleteTicket">完成工单</button>
			</view>
			<lb-picker ref="picker1" v-model="value1" mode="selector" :list="operatorList" :dataset="{ name: 'label1' }" @change="handleChange"
			 @confirm="handleConfirm" @cancel="handleCancel">
			</lb-picker>
			<button class="accept-ticket" @click="accept" v-if="ticketDetail['工单状态'] == 'unclaimed'">接单</button> -->
		</view>
		<view v-if="tabCurrentIndex == 1">
			<view class="example-body" style="height: 100vh;">
				<uni-steps :options="ticketDetail['跟进信息']" active-color="#5094FF" :active="ticketDetail['跟进信息'].length-1" direction="column" />
			</view>
			<!-- <view class="order-btn" v-if="ticketDetail['工单状态'] !== 'completed' && ticketDetail['工单状态'] !== 'abandoned' && !isUnitTicket && ticketDetail['工单状态'] !== 'unclaimed'">
				<button @click="goReply">回复</button>
				<button @click="cancelOrder">废弃工单</button>
			</view>
			<button class="accept-ticket" @click="goReply" v-if="personType == 2">回复</button> -->
		</view>
	</view>
</template>

<script>
	import uniSteps from '@/components/uni-steps/uni-steps.vue'
	import LbPicker from '@/components/lb-picker/index.vue'
	import {
		previewImg
	} from '@/utils/previewImg'
	import dayjs from "dayjs";
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		components: {
			uniSteps,
			LbPicker
		},
		data() {
			return {
				originType: this.$type.originType,
				context: null,
				value1: '',
				label1: '',
				tabCurrentIndex: 0,
				navList: [{
						text: '工单信息'
					},
					{
						text: '跟进信息'
					}
				],
				active: 1,
				resultUrl: '../../static/icon/8.png',
				ticketId: null,
				ticketDetail: {},
				params: {
					id: null,
					操作类型: null,
					操作原因: null,
					操作附件: []
				},
				ticketType: {
					'A1': '故障报修-水电',
					'A2': '故障报修-建材',
					'A3': '故障报修-家具',
					'A4': '故障报修-电器',
					'A5': '故障报修-电器',
					'AA': '故障报修-其他',
					'B': '上门回收',
					'C': '消防安全',
					'D': '保洁清理',
					'E': '设备安装',
					'F': '绿化养护',
					'G': '装修申请',
					'H': '装修验收',
					'I': '意见投诉'
				},
				params1: {
					姓名: null,
					身份证号: null,
					单位id: null,
					人员类型: null,
					负责项目: null,
					负责工单类型: null,
					电话: null,
					状态: 1
				},
				params2: {
					id: null,
					接单人id: null,
					操作原因: null
				},
				operatorList: [],
				ticketFile: {},
				file: {
					fileName: null,
					fileData: null
				},
				signFile: '',
				imgLength: 0,
				imgItem: [],
				resultItem: [],
				resultFile: {},
				接单人id: null,
				renovationTicket: null,
				startTime: null,
				endTime: null,
				checkTicket: null,
				loading: true,
				params3: {
					id: null,
					接单人id: null,
					操作原因: null
				},
				url: '',
				params4: {
					code: null
				},
				addressUrl: ''
			}
		},
		onLoad(options) {
			// console.log(this.isUnitTicket)
			// console.log(options)
			this.url = uni.getStorageSync('url')
			this.ticketId = options.id
			this.params2.id = +options.id
			this.getTicketDetail()
		},
		onShow() {

		},
		computed: {
			...mapState(['isUnitTicket', 'isMyTicket']),
			...mapGetters(['personType'])
		},
		methods: {
			accept() {
				uni.showModal({
					title: '提示',
					content: '确认接手该工单吗？',
					success: (res) => {
						if (res.confirm) {
							this.acceptTicket()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			acceptTicket() {
				uni.showLoading({
					mask: true
				})
				this.params3.id = +this.ticketId
				this.params3.接单人id = uni.getStorageSync('userInfo').id
				this.$http2.post('ticketSystem/ticket/assign', this.params3).then(res => {
					if (res.code === 10000) {
						// this.resetSum(true)
						uni.redirectTo({
							url: '../acceptSuccess/acceptSuccess?path=../index/index' + '&title=返回工单首页'
						})
					}
				})
			},
			goCompleteTicket() {
				uni.navigateTo({
					url: '../completeTicket/completeTicket?id=' + this.ticketId
				})
			},
			...mapMutations(['resetSum']),
			goReply() {
				uni.navigateTo({
					url: '../reply/reply?id=' + this.ticketId
				})
			},
			// 获取处理人员
			getOperatorList() {
				// this.params1.单位id = uni.getStorageSync('currentUnitId')
				this.$http2.post('/sys/user/list', this.params1).then(res => {
					// console.log(res, '处理人员')
					if (res.code === 10000) {
						if (res.data.list !== null) {
							res.data.list.forEach(item => {
								item.value = item.id
								item.label = item.name
							})
							// this.operatorList = res.data.list.filter(item => {
							// 	return item.id !== this.接单人id
							// })
						}
						this.operatorList = res.data.list.filter(item => {
							return item.id !== this.接单人id
						})
					}
				})
			},
			// getOperatorList() {
			// 	this.$http2.post('worksys/worker/list', this.params1).then(res => {
			// 		console.log(res, '处理人员')
			// 		if (res.code === 10000) {
			// 			if (res.data.list !== null) {
			// 				res.data.list.forEach(item => {
			// 					item.value = item.人员名称
			// 					item.label = item.人员名称
			// 				})
			// 				this.operatorList = res.data.list.filter(item => {
			// 					return item.id !== this.接单人id
			// 				})
			// 			}
			// 		}
			// 	})
			// },
			// 转派工单
			transferTicket() {
				uni.showLoading({
					title: '转派中'
				})
				this.params2.接单单位 = uni.getStorageSync('currentUnitId')
				this.$http2.post('ticketSystem/ticket/assign', this.params2).then(res => {
					if (res.code === 10000) {
						uni.redirectTo({
						    url: '../acceptSuccess/acceptSuccess?title=' + '派发成功'
						});
					}
				})
			},
			// 响应工单
			responseTicket() {
				uni.showLoading()
				this.$http2.post('ticketSystem/ticket/response', {
					id: +this.ticketId
				}).then(res => {
					console.log(res)
					if (res.code === 10000) {
						this.ticketDetail['工单状态'] = 'handling'
						uni.showToast({
							title: '响应成功'
						})
					}
				})
			},
			// 废弃工单
			cancelOrder() {
				uni.navigateTo({
					url: '../cancelTicket/cancelTicket?id=' + this.ticketId
				})
			},
			// 完成工单
			completeTicket() {
				uni.showLoading()
				this.compress(this.resultUrl)
			},
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			handleTap(name) {
				uni.hideTabBar({
					animation: true
				})
				this.$refs[name].show()
				if (this.operatorList.length === 0) {
					uni.showToast({
						title: '无转单人员,无法转派工单',
						icon: 'none'
					})
				}
			},
			handleChange(e) {
				console.log('change::', e)
			},
			handleConfirm(e) {
				uni.showTabBar({
					animation: true
				})
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
				console.log('confirm::', e)
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					if (name && label) {
						this[name] = label
					}
				}
				uni.showModal({
					title: '提示',
					content: '确认派发工单给' + e.item.label + '吗？',
					success: (res) => {
						if (res.confirm) {
							// console.log('废弃工单')
							this.params2.接单人id = e.item.id
							this.transferTicket()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			handleCancel(e) {
				uni.showTabBar({
					animation: true
				})
				console.log('cancel::', e)
			},
			// 获取工单详情
			getTicketDetail() {
				this.$http2.post('ticketSystem/ticket/info', {
					id: +this.ticketId
				}).then(res => {
					console.log(res)
					if (res.code === 10000) {
						// this.params1.负责项目 = res.data.所属项目id
						this.getOperatorList()
						if (res.data.工单类型 === 'H') {
							res.data.上门时间 = dayjs(res.data.上门时间).format('YYYY-MM-DD')
						}
						// res.data.创建时间 = dayjs(res.data.创建时间).format('YYYY-MM-DD HH:mm:ss')
						// if (res.data.接单时间 !== '') {
						// 	res.data.接单时间 = dayjs(res.data.接单时间).format('YYYY-MM-DD HH:mm:ss')
						// }
						// if (res.data.处理时间 !== '') {
						// 	res.data.处理时间 = dayjs(res.data.处理时间).format('YYYY-MM-DD HH:mm:ss')
						// }
						// if (res.data.完成时间 !== '') {
						// 	res.data.完成时间 = dayjs(res.data.完成时间).format('YYYY-MM-DD HH:mm:ss')
						// }
						this.ticketDetail = res.data
						// this.ticketDetail.上门时间 = dayjs(this.ticketDetail.上门时间).format('YYYY-MM-DD')
						this.renovationTicket = res.data.装修申请工单
						this.checkTicket = res.data.装修验收工单
						if (this.checkTicket !== null) {
							this.checkTicket.竣工时间 = dayjs(this.checkTicket.竣工时间).format('YYYY-MM-DD')
						}
						if (res.data.装修申请工单 !== null) {
							this.startTime = dayjs(this.renovationTicket.装修开始时间).format('YYYY-MM-DD')
							this.endTime = dayjs(this.renovationTicket.装修结束时间).format('YYYY-MM-DD')
						}
						this.接单人id = res.data.接单人id
						res.data.跟进信息.forEach(item => {
							item.时间 = dayjs(item.时间).format("YYYY-MM-DD HH:mm:ss")
						})
						if (res.data.报事附件 !== null) {
							res.data.报事附件.forEach((item, index) => {
								this.downloadFile(item, index)
							})
						}
						if (res.data.处理结果附件 !== null) {
							res.data.处理结果附件.forEach((item, index) => {
								this.downloadResult(item, index)
							})
						}
						if (res.data.业主签字 !== '') {
							this.downloadSign(res.data.业主签字)
						}
						if (res.data.工单状态 === 'pending' && !this.isUnitTicket & res.data.接单人id === uni.getStorageSync('id')) {
							this.responseTicket()
						}
						// if (res.data.设备编码) {
						// 	this.params4.code = res.data.设备编码
						// 	this.getAddress()
						// }
					}
				})
			},
			downloadSign(id) {
				this.$http2.post('common/file/download', {
					id
				}).then(res => {
					console.log(res.data.fileData)
					if (res.code === 10000) {
						this.signFile = res.data.fileData
					}
				})
			},
			downloadResult(id, index) {
				// this.imgLength++
				this.$http2.post('common/file/download', {
					id
				}).then(res => {
					console.log(res)
					if (res.code === 10000) {
						this.imgItem.push(res.data.fileData)
						this.resultFile[index] = {}
						this.resultFile[index].fileData = res.data.fileData
						console.log(this.resultFile)
					}
				})
			},
			downloadFile(id, index) {
				this.imgLength++
				this.$http2.post('common/file/download', {
					id
				}).then(res => {
					console.log(res)
					if (res.code === 10000) {
						this.imgItem.push(res.data.fileData)
						this.ticketFile[index] = {}
						this.ticketFile[index].fileData = res.data.fileData
						console.log(this.ticketFile)
					}
				})
			},
			previewImage(index) {
				// console.log(index)
				let previewList = []
				if (this.ticketFile[0]) {
					previewList.push(this.ticketFile[0].fileData)
				}
				if (this.ticketFile[1]) {
					previewList.push(this.ticketFile[1].fileData)
				}
				if (this.ticketFile[2]) {
					previewList.push(this.ticketFile[2].fileData)
				}
				previewImg(previewList, index)
			},
			previewResult(index) {
				let previewList = []
				if (this.resultFile[0]) {
					previewList.push(this.resultFile[0].fileData)
				}
				if (this.resultFile[1]) {
					previewList.push(this.resultFile[1].fileData)
				}
				if (this.resultFile[2]) {
					previewList.push(this.resultFile[2].fileData)
				}
				previewImg(previewList, index)
			}
		}
	}
</script>

<style lang="scss">
	.van-empty__description {
		margin-top: -4rpx !important;
	}

	.detail-container {
		background-color: #f5f5f5;

		.accept-ticket {
			height: 90rpx;
			color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #1152FC;
		}

		.navbar {
			display: flex;
			height: 40px;
			padding: 0 5px;
			background: #fff;
			// box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
			position: relative;
			z-index: 10;
			border-bottom: 2rpx solid #f5f5f5;

			.nav-item {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				font-size: 32rpx;
				color: #666;
				position: relative;

				&.current {
					color: #1152FC;

					&:after {
						content: '';
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						width: 120rpx;
						height: 0;
						border-bottom: 2px solid #1152FC;
					}
				}
			}
		}

		.status {
			width: 750rpx;
			height: 88rpx;
			display: flex;
			padding: 0 50rpx;
			box-sizing: border-box;
			justify-content: space-between;
			background-color: #fff;
			border-bottom: 2rpx solid #f5f5f5;
			align-items: center;

			text {
				font-size: 32rpx;
				&:nth-child(1) {
					color: #333;
					font-size: 32rpx;
				}
			}
		}

		.order-content {
			width: 750rpx;
			background-color: #fff;
			margin-bottom: 135rpx;
			padding-left: 49rpx;
			padding-top: 30rpx;

			.content-item {
				// height: 72rpx;
				padding: 20rpx 20rpx 20rpx 0;
				display: flex;
				align-items: center;
				font-size: 32rpx;
				view {
					font-size: 32rpx;
				}
				.item-name {
					margin-right: 20rpx;
				}

				.four {
					margin-right: 48rpx;
				}
			}

			.content-img {
				width: 100%;
				height: 280rpx;
				display: flex;
				margin-top: 40rpx;

				.img-item {
					width: 220rpx;
					height: 220rpx;
					margin-right: 10rpx;

					image {
						width: 100%;
						height: 100%;
					}

					&:last-child {
						margin-right: 0;
					}
				}
			}

			.sign-img {
				width: 100%;
				height: 280rpx;
				// background-color: pink;
				display: flex;
				padding-top: 40rpx;

				.left-text {
					width: 200rpx;
				}

				.sign-item {
					width: 220rpx;
					height: 220rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.detail-item {
				width: 750rpx;
				height: 88rpx;
				display: flex;
				line-height: 88rpx;
				// padding-left: 20rpx;
				background-color: #fff;
				border-bottom: 2rpx solid #f5f5f5;

				.left {
					margin-right: 37rpx;
				}

				.sign {
					width: 115rpx;
					height: 88rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.name {
					margin-right: 26rpx;
				}
			}
		}

		.order-btn {
			height: 90rpx;
			// line-height: ;
			display: flex;
			position: fixed;
			bottom: 0rpx;
			left: 0;
			right: 0;

			button {
				border-radius: 0;
				flex: 1;

				// line-height: 100rpx;
				&:nth-child(1) {
					color: #1152FC;
					background-color: #fff;
					border: 2rpx solid #1064E9;
				}

				&:nth-child(2) {
					color: #fff;
					background-color: #1152FC;
					border: 2rpx solid #1064E9;
				}

				&::after {
					border-radius: 0;
				}
			}
		}

		.van-empty {
			height: 300rpx;
			margin-bottom: 20rpx;
		}
	}

	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}

	/* #endif */

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #f5f5f5;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 28rpx;
		line-height: inherit;
	}

	.example {
		padding: 0 30rpx 30rpx;
	}

	.example-info {
		padding: 30rpx;
		color: #3b4144;
		background: #ffffff;
	}

	.example-body {
		height: auto !important;
		// padding-bottom: 80rpx;
		margin-bottom: 80rpx;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14rpx;
		background-color: #ffffff;
	}

	/* #endif */
	.example {
		padding: 0 30rpx;
	}

	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 30rpx;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 30rpx;
	}

	.example-info-text {
		font-size: 28rpx;
		line-height: 36rpx;
	}


	.example-body {
		flex-direction: column;
		padding: 30rpx;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}


	.status-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 92rpx;
		margin: 30rpx;
		background-color: #007AFF;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		flex-direction: row;
	}
</style>
